<template>
  <div class="body">
    <div class="content color_6 fon_14">
      <div class="title fon_16 wei t_l ba_f pad_20">商品详情</div>
      <div class="ba_f pad_20 min_width">
        <div class="subtit t_l fon_14">商品类型</div>
        <div class="t_l pad_tb_20 mar_l20 goodselect flex">
          <el-radio v-model="radio1" label="1" border>
            <span>普通商品</span>
            <div class="mar_t5 color_9 fon_12">（同城送活自提）</div>
          </el-radio>
          <el-radio v-model="radio1" label="2" border>
            <span>赠品</span>
            <div class="mar_t5 color_9 fon_12">（同城送活自提）</div>
          </el-radio>
        </div>
        <div class="subtit t_l fon_14 mar_t10">基本信息</div>
        <div class="formcon pad_tb_20">
          <div class="clr flex pad_tb_10 wid">
            <div class="clr_l flex-g-0 pad_r_20">商品排序:</div>
            <div class="clr_r flex-g-1">
              <el-input v-model="formInline.solt" placeholder="商品名称"></el-input>
            </div>
          </div>
          <div class="clr flex pad_tb_10 wid">
            <div class="clr_l flex-g-0 pad_r_20">
              <span class="color-red">*</span>商品名称:
            </div>
            <div class="clr_r flex-g-1">
              <el-input v-model="formInline.name" placeholder="商品名称"></el-input>
            </div>
          </div>
          <div class="clr flex pad_tb_10 wid flex-y-top">
            <div class="clr_l flex-g-0 pad_r_20">
              <span class="color-red">*</span>商品分类:
            </div>
            <div class="clr_r flex-g-1 top">
              <el-select v-model="formInline.region" placeholder="请选择商品所属分类">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
              <div class="yb_margin">
                商品分类及分类细项
                <a href="#" class="yb_linkl mar_l10">点此查看</a>
              </div>
            </div>
          </div>
          <div class="clr flex pad_tb_10 wid flex-y-top">
            <div class="clr_l flex-g-0 pad_r_20">
              <span class="color-red">*</span>商品单位:
            </div>
            <div class="clr_r flex-g-1 top">
              <el-select v-model="formInline.region" placeholder="请选择商品所属单位">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
              <div class="yb_margin">
                商品单位及单位细项
                <a href="#" class="yb_linkl mar_l10">点此查看</a>
              </div>
            </div>
          </div>
          <div class="clr flex pad_tb_10 wid">
            <div class="clr_l flex-g-0 pad_r_20">
              <span class="color-red">*</span>商品封面:
            </div>
            <div class="clr_r flex-g-1">
              <div class="yb_margin">建议尺寸: 800*800像素，用户商品列表展示</div>
            </div>
          </div>
          <div class="clr flex pad_tb_10 wid">
            <div class="clr_l flex-g-0 pad_r_20">
              <span class="color-red">*</span>商品轮播图:
            </div>
            <div class="clr_r flex-g-1">
              <div class="yb_margin">建议尺寸: 800*800像素，你可以拖拽图片调整顺序，最多上传9张</div>
            </div>
          </div>
          <div class="clr flex pad_tb_10 wid">
            <div class="clr_l flex-g-0 pad_r_20">主图视频:</div>
            <div class="clr_r flex-g-1">
              <div class="yb_margin">目前仅支持在手机端播放，建议时长9-30秒，和建议视频宽高比16:9</div>
            </div>
          </div>
          <div class="clr flex pad_tb_10 wid flex-y-top">
            <div class="clr_l flex-g-0 pad_r_20">商品描述:</div>
            <div class="clr_r flex-g-1">
              <el-input v-model="formInline.name" placeholder="商品名称"></el-input>
              <div class="yb_margin">
                在商品列表页、详情页标题下面展示卖点信息，建议60字以内
                <a href="#" class="yb_linkl mar_l10">点此查看</a>
              </div>
            </div>
          </div>
        </div>
        <div class="subtit t_l fon_14 mar_t10">价格库存</div>
        <div class="formcon pad_tb_20 color_6 fon_14">
          <div class="clr flex pad_tb_10 wid">
            <div class="clr_l flex-g-0 pad_r_20">规格类型:</div>
            <div class="clr_r flex-g-1">
              <el-radio v-model="radio" label="1">无</el-radio>
              <el-radio v-model="radio" label="2">多规格商品</el-radio>
            </div>
          </div>
          <div class="clr flex pad_tb_10 wid" v-show="radio=='2'">
            <div class="spgg wid">
              <div class="clr flex mar_t10 wid">
                <div class="clr_l flex-g-0 pad_r_20">商品规格:</div>
                <div class="clr_r flex-g-1">
                  <div class>
                    多种规格，不同价格，例如：杯型(大杯、中杯、小杯)
                    <a href="#" class="yb_linkl mar_l10">了解详情</a>
                  </div>
                </div>
              </div>
              <div class="t_l">
                <div class v-for="(item,index) in spec" :key="index">
                  <div class="clr flex wid mar_t10">
                    <div class="clr_l flex-g-0 pad_r_20 t_l">
                      <span class="color-red">*</span>规格名称:
                    </div>
                    <div class="clr_r flex-g-1 pad_l_30">
                      <span class="color-red">*</span>规格属性
                    </div>
                  </div>
                  <div class="clr flex wid flex-y-top">
                    <div class="clr_l flex-g-0 pad_r_20 t_l">
                      <el-select v-model="item.specName" class="atinput" filterable placeholder="如：杯型" @blur="selectSpecBlur($event,item)">
                        <el-option label="大杯" value="shanghai"></el-option>
                        <el-option label="中杯" value="beijing"></el-option>
                        <el-option label="小杯" value="beijing"></el-option>
                      </el-select>
                    </div>
                    <div class="clr_r flex-g-1 pad_l_30 flex atinputbox flex-wrap flex-y-top">
                      <el-input v-model="item.wmxsPrice" placeholder auto-complete="off" class="atinput jlinptfist" type="number">
                        <template slot="prepend">外卖价格(元)</template>
                      </el-input>
                      <el-input v-model="item.wmscPrice" placeholder auto-complete="off" class="atinput jlinptfist" type="number">
                        <template slot="prepend">划线价格(元)</template>
                      </el-input>
                      <el-input v-model="item.wmStock" placeholder auto-complete="off" class="atinput jlinptfist" type="number">
                        <template slot="prepend">外卖库存(件)</template>
                      </el-input>
                      <el-input v-model="item.tsxsPrice" placeholder auto-complete="off" class="atinput jlinptfist" type="number">
                        <template slot="prepend">堂食价格(元)</template>
                      </el-input>
                      <el-input v-model="item.tsscPrice" placeholder auto-complete="off" class="atinput jlinptfist" type="number">
                        <template slot="prepend">堂食价格(元)</template>
                      </el-input>
                      <el-input v-model="item.tsStock" placeholder auto-complete="off" class="atinput" type="number">
                        <template slot="prepend">堂食库存(件)</template>
                      </el-input>
                      <el-button size="mini" type="text" @click="delSpec(index)" class="mar_t5">
                        <i class="el-icon-remove-outline mar_r5"></i>删除
                      </el-button>
                    </div>
                  </div>
                  <div class="bor_b_df5 boxfor"></div>
                </div>
                <div class="subjectcolor curs pad_tb_10 mar_l50 mar_t10" v-show="this.spec.length<5" @click="addSpec">
                  <i class="el-icon-circle-plus mar_r5"></i>添加规格，最多5个
                </div>
              </div>
              <!--                            <div class="newFormatTable">-->
              <!--                                <table>-->
              <!--                                    <thead>-->
              <!--                                    <tr>-->
              <!--                                        <th width="300">商品规格</th>-->
              <!--                                        <th>-->
              <!--                                            <span class="reqirue">*</span>-->
              <!--                                            <span>外卖销售价格</span>-->
              <!--                                            <span><i class="el-icon-edit-outline el-popover__reference" v-popover:popover4></i></span>-->
              <!--                                        </th>-->
              <!--                                        <th>-->
              <!--                                            <span>外卖划线价格</span>-->
              <!--                                            <span><i class="el-icon-edit-outline el-popover__reference" v-popover:popover5></i></span>-->
              <!--                                        </th>-->
              <!--                                        <th>-->
              <!--                                            <span class="reqirue">*</span>-->
              <!--                                            <span>外卖库存</span>-->
              <!--                                            <span><i class="el-icon-edit-outline el-popover__reference" v-popover:popover6></i></span>-->
              <!--                                        </th>-->

              <!--                                        <th>-->
              <!--                                            <span class="reqirue">*</span>-->
              <!--                                            <span>堂食销售价格</span>-->
              <!--                                            <span><i class="el-icon-edit-outline el-popover__reference" v-popover:popover1></i></span>-->
              <!--                                        </th>-->
              <!--                                        <th>-->
              <!--                                            <span>堂食划线价格</span>-->
              <!--                                            <span><i class="el-icon-edit-outline el-popover__reference" v-popover:popover2></i></span>-->
              <!--                                        </th>-->
              <!--                                        <th>-->
              <!--                                            <span class="reqirue">*</span>-->
              <!--                                            <span>堂食库存</span>-->
              <!--                                            <span><i class="el-icon-edit-outline el-popover__reference" v-popover:popover3></i></span>-->
              <!--                                        </th>-->
              <!--                                    </tr>-->
              <!--                                    </thead>-->
              <!--                                    <tbody>-->
              <!--                                    <tr v-for="(item,index) in group" :key="index">-->
              <!--                                        <td>{{item.data}}</td>-->
              <!--                                        <td>-->
              <!--                                            <div class="haveUnit clearfix">-->
              <!--                                                <input type="number" name="" min='0' class="widthJust" v-model="item.wmxsPrice">-->
              <!--                                                <div class="unit">元</div>-->
              <!--                                            </div>-->
              <!--                                        </td>-->
              <!--                                        <td>-->
              <!--                                            <div class="haveUnit clearfix">-->
              <!--                                                <input type="number" name="" min='0' class="widthJust" v-model="item.wmscPrice">-->
              <!--                                                <div class="unit">元</div>-->
              <!--                                            </div>-->
              <!--                                        </td>-->
              <!--                                        <td>-->
              <!--                                            <div class="haveUnit clearfix">-->
              <!--                                                <input type="number" name="" min='0' class="widthJust" v-model="item.wmStock">-->
              <!--                                                <div class="unit">件</div>-->
              <!--                                            </div>-->
              <!--                                        </td>-->

              <!--                                        <td>-->
              <!--                                            <div class="haveUnit clearfix">-->
              <!--                                                <input type="number" name="" min='0' class="widthJust" v-model="item.tsxsPrice">-->
              <!--                                                <div class="unit">元</div>-->
              <!--                                            </div>-->
              <!--                                        </td>-->
              <!--                                        <td>-->
              <!--                                            <div class="haveUnit clearfix">-->
              <!--                                                <input type="number" name="" min='0' class="widthJust" v-model="item.tsscPrice">-->
              <!--                                                <div class="unit">元</div>-->
              <!--                                            </div>-->
              <!--                                        </td>-->
              <!--                                        <td>-->
              <!--                                            <div class="haveUnit clearfix">-->
              <!--                                                <input type="number" name="" min='0' class="widthJust" v-model="item.tsStock">-->
              <!--                                                <div class="unit">件</div>-->
              <!--                                            </div>-->
              <!--                                        </td>-->
              <!--                                    </tr>-->
              <!--                                    </tbody>-->
              <!--                                </table>-->
              <!--                            </div>-->
            </div>
          </div>
          <div v-show="radio=='1'">
            <div class="flex pad_tb_10 wid dangg">
              <div class="clr_l flex-g-0 pad_r_20">
                <span class="color-red">*</span>外卖价格库存:
              </div>
              <div class="clr_r flex-g-1 flex">
                <div class style="width: 180px;">
                  <el-input v-model="price" placeholder auto-complete="off" class="jlinptfist" type="number">
                    <template slot="prepend">价格(元)</template>
                  </el-input>
                </div>
                <div class style="width: 180px;">
                  <el-input v-model="stock" placeholder auto-complete="off" class type="number">
                    <template slot="prepend">库存</template>
                  </el-input>
                </div>
                <el-checkbox v-model="checked" class="mar_l20">无限库存</el-checkbox>
              </div>
            </div>
            <div class="flex pad_tb_10 wid dangg">
              <div class="clr_l flex-g-0 pad_r_20">
                <span class="color-red">*</span>堂食价格库存:
              </div>
              <div class="clr_r flex-g-1 flex">
                <div class style="width: 180px;">
                  <el-input v-model="price" placeholder auto-complete="off" class="jlinptfist" type="number">
                    <template slot="prepend">价格(元)</template>
                  </el-input>
                </div>
                <div class style="width: 180px;">
                  <el-input v-model="stock" placeholder auto-complete="off" class type="number">
                    <template slot="prepend">库存</template>
                  </el-input>
                </div>
                <el-checkbox v-model="checked" class="mar_l20">无限库存</el-checkbox>
              </div>
            </div>
            <div class="flex pad_tb_10 wid dangg">
              <div class="clr_l flex-g-0 pad_r_20">划线价:</div>
              <div class="clr_r flex-g-1 flex">
                <div class style="width: 180px;">
                  <el-input v-model="price" placeholder auto-complete="off" class type="number">
                    <template slot="prepend">¥</template>
                  </el-input>
                </div>
              </div>
            </div>
            <div class="flex pad_tb_10 wid dangg flex-y-top">
              <div class="clr_l flex-g-0 pad_r_20">起售:</div>
              <div class="clr_r flex-g-1">
                <div class="flex">
                  <span class="mar_r10">商品至少</span>
                  <div class="flex" style="width: 120px;">
                    <el-input v-model="price" placeholder auto-complete="off" class type="number"></el-input>
                  </div>
                  <span class="mar_l10">件起售</span>
                </div>
                <div class="yb_margin">起售数量超出商品库存时，买家无法购买该商品。</div>
              </div>
            </div>
            <div class="flex pad_tb_10 wid dangg flex-y-top">
              <div class="clr_l flex-g-0 pad_r_20">限购:</div>
              <div class="clr_r flex-g-1">
                <div class="flex">
                  <div class="flex" style="width: 180px;">
                    <el-input v-model="price" placeholder auto-complete="off" class type="number">
                      <template slot="prepend">件</template>
                    </el-input>
                  </div>
                </div>
                <div class="yb_margin">限制每人每单可购买数量，不填或填0择代表不限制。</div>
              </div>
            </div>
            <div class="flex pad_tb_10 wid dangg flex-y-top">
              <div class="clr_l flex-g-0 pad_r_20">会员折扣:</div>
              <div class="clr_r flex-g-1">
                <div class="flex">
                  <el-checkbox v-model="checked" class="mar_l20">参加会员折扣</el-checkbox>
                </div>
                <div class="yb_margin">
                  是否勾选不影响自定义会员价生效。
                  <a href="#" class="yb_linkl mar_l10">什么时自定义会员价？</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="折叠更多设置" name="1">
              <div class="clr flex pad_tb_10 wid">
                <div class="clr_l flex-g-0 pad_r_20">商品编码:</div>
                <div class="clr_r flex-g-1">
                  <el-input v-model="formInline.name" placeholder="商品编码"></el-input>
                </div>
              </div>
              <div class="clr flex pad_tb_10 wid flex-y-top">
                <div class="clr_l flex-g-0 pad_r_20">成本价:</div>
                <div class="clr_r flex-g-1">
                  <el-input v-model="formInline.name" placeholder="成本价" class="yinput">
                    <template slot="prepend">¥</template>
                  </el-input>
                  <div class="yb_margin">成本价未来会用于营销建议，利润分析等</div>
                </div>
              </div>
              <div class="clr flex pad_tb_10 wid flex-y-top">
                <div class="clr_l flex-g-0 pad_r_20">包装费:</div>
                <div class="clr_r flex-g-1">
                  <el-input v-model="formInline.name" placeholder="包装费" class="yinput">
                    <template slot="prepend">¥</template>
                  </el-input>
                  <div class="yb_margin">仅限外卖订单使用</div>
                </div>
              </div>
              <div class="clr flex pad_tb_10 wid flex-y-top">
                <div class="clr_l flex-g-0 pad_r_20">虚拟销量:</div>
                <div class="clr_r flex-g-1">
                  <el-input v-model="formInline.name" placeholder="成本价" class="yinput">
                    <template slot="prepend">件</template>
                  </el-input>
                  <div class="yb_margin">显示销量 = 虚拟销量 + 实际销量</div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="subtit t_l fon_14 mar_t10">商品属性</div>
        <div class="spsx">
          <div class="clr flex mar_t10 wid">
            <div class="clr_l flex-g-0 pad_r_20">商品属性:</div>
            <div class="clr_r flex-g-1">
              <div class>
                多种规格，不同价格，例如：杯型(大杯、中杯、小杯)
                <a href="#" class="yb_linkl mar_l10">了解详情</a>
              </div>
            </div>
          </div>
          <div class="t_l">
            <div class v-for="(item,index) in attribute" :key="index">
              <div class="clr flex wid mar_t10">
                <div class="clr_l flex-g-0 pad_r_20 t_l">
                  <span class="color-red">*</span>属性名称:
                </div>
                <div class="clr_r flex-g-1 pad_l_30">
                  <span class="color-red">*</span>属性值（至少填写两个，最多八个）
                </div>
              </div>
              <div class="clr flex wid flex-y-top">
                <div class="clr_l flex-g-0 pad_r_20 t_l">
                  <!--                                <el-input v-model="item.attributeName" placeholder="如：辣度" auto-complete="off" class="atinput"></el-input>-->
                  <el-select v-model="item.attributeName" class="atinput" filterable placeholder="如：辣度" @blur="selectBlur($event,item)">
                    <el-option label="甜度" value="shanghai"></el-option>
                    <el-option label="辣度" value="beijing"></el-option>
                  </el-select>
                </div>
                <div class="clr_r flex-g-1 pad_l_30 flex atinputbox flex-wrap flex-y-top">
                  <el-select v-model="item.attributeValue0" class="atinput" filterable placeholder="如：辣度" @blur="selectValueBlur($event,item,0)">
                    <el-option label="微辣" value="shanghai"></el-option>
                    <el-option label="中辣" value="beijing"></el-option>
                    <el-option label="特辣" value="beijing2"></el-option>
                  </el-select>
                  <el-select v-model="item.attributeValue1" class="atinput" filterable placeholder @blur="selectValueBlur($event,item,1)">
                    <el-option label="微辣" value="shanghai"></el-option>
                    <el-option label="中辣" value="beijing"></el-option>
                    <el-option label="特辣" value="beijing2"></el-option>
                  </el-select>
                  <el-select v-model="item.attributeValue2" class="atinput" filterable placeholder @blur="selectValueBlur($event,item,2)">
                    <el-option label="微辣" value="shanghai"></el-option>
                    <el-option label="中辣" value="beijing"></el-option>
                    <el-option label="特辣" value="beijing2"></el-option>
                  </el-select>
                  <el-select v-model="item.attributeValue3" class="atinput" filterable placeholder @blur="selectValueBlur($event,item,3)">
                    <el-option label="微辣" value="shanghai"></el-option>
                    <el-option label="中辣" value="beijing"></el-option>
                    <el-option label="特辣" value="beijing2"></el-option>
                  </el-select>
                  <el-select v-model="item.attributeValue4" class="atinput" filterable placeholder @blur="selectValueBlur($event,item,4)">
                    <el-option label="微辣" value="shanghai"></el-option>
                    <el-option label="中辣" value="beijing"></el-option>
                    <el-option label="特辣" value="beijing2"></el-option>
                  </el-select>
                  <el-select v-model="item.attributeValue5" class="atinput" filterable placeholder @blur="selectValueBlur($event,item,5)">
                    <el-option label="微辣" value="shanghai"></el-option>
                    <el-option label="中辣" value="beijing"></el-option>
                    <el-option label="特辣" value="beijing2"></el-option>
                  </el-select>
                  <el-select v-model="item.attributeValue6" class="atinput" filterable placeholder @blur="selectValueBlur($event,item,6)">
                    <el-option label="微辣" value="shanghai"></el-option>
                    <el-option label="中辣" value="beijing"></el-option>
                    <el-option label="特辣" value="beijing2"></el-option>
                  </el-select>
                  <el-select v-model="item.attributeValue7" class="atinput" filterable placeholder @blur="selectValueBlur($event,item,7)">
                    <el-option label="微辣" value="shanghai"></el-option>
                    <el-option label="中辣" value="beijing"></el-option>
                    <el-option label="特辣" value="beijing2"></el-option>
                  </el-select>
                  <el-button size="mini" type="text" @click="delAttribute(index)" class="mar_t5">
                    <i class="el-icon-remove-outline mar_r5"></i>删除
                  </el-button>
                </div>
              </div>
              <div class="bor_b_df5 boxfor"></div>
            </div>
            <div class="subjectcolor curs pad_tb_10 mar_l50 mar_t10" v-show="this.attribute.length<5" @click="addAttribute">
              <i class="el-icon-circle-plus mar_r5"></i>添加属性，最多5个
            </div>
          </div>
        </div>
        <div class="subtit t_l fon_14 mar_t10">商品加料</div>
        <div class="spjl">
          <div class="clr flex mar_t10 wid">
            <div class="clr_l flex-g-0 pad_r_20">商品加料:</div>
            <div class="clr_r flex-g-1">
              <div class>
                同种价格多种口味，如：少糖、半糖等
                <a href="#" class="yb_linkl mar_l10">了解详情</a>
              </div>
            </div>
          </div>
          <div class="t_l">
            <div class v-for="(item,index) in feeding" :key="index">
              <div class="clr flex wid flex-y-top jlcon mar_t20">
                <div class="flex-g-0 pad_r_20 t_l">
                  <div class="mar_b5 t_r">
                    <span class="color-red">*</span>加料名称:
                  </div>
                  <el-select v-model="item.feedingName" class="atinput" filterable placeholder="如：辣度" @blur="selectBlur($event,item)">
                    <el-option label="甜度" value="shanghai"></el-option>
                    <el-option label="辣度" value="beijing"></el-option>
                  </el-select>
                </div>
                <div class="flex-g-1 pad_l_30 flex atinputbox flex-wrap">
                  <div class="mar_r20 jlinputbox">
                    <div class="mar_b5">
                      <span class="color-red">*</span>外卖价格库存
                    </div>
                    <el-input v-model="item.feedingOutPrice" placeholder auto-complete="off" class="atinput jlinptfist" type="number">
                      <template slot="prepend">价格(元)</template>
                    </el-input>
                    <el-input v-model="item.feedingOutStock" placeholder auto-complete="off" class="atinput" type="number">
                      <template slot="prepend">库存</template>
                    </el-input>
                  </div>
                  <div>
                    <div class="mar_b5">
                      <span class="color-red">*</span>堂食价格库存
                    </div>
                    <el-input v-model="item.feedingInPrice" placeholder auto-complete="off" class="atinput jlinptfist" type="number">
                      <template slot="prepend">价格(元)</template>
                    </el-input>
                    <el-input v-model="item.feedingInStock" placeholder auto-complete="off" class="atinput" type="number">
                      <template slot="prepend">库存</template>
                    </el-input>
                    <el-button size="mini" type="text" @click="delFeeding(index)" class="mar_t5">
                      <i class="el-icon-remove-outline mar_r5"></i>删除
                    </el-button>
                  </div>
                </div>
              </div>
              <div class="bor_b_df5 boxfor"></div>
            </div>
            <div class="subjectcolor curs pad_tb_10 mar_l50 mar_t10" v-show="this.feeding.length<5" @click="addFeeding">
              <i class="el-icon-circle-plus mar_r5"></i>添加加料，最多5个
            </div>
          </div>
        </div>
        <div class="subtit t_l fon_14 mar_t10">其他信息</div>
        <div>
          <div class="clrs flex pad_tb_10 wid flex-y-top">
            <div class="clr_l flex-g-0 pad_r_20">上架时间:</div>
            <div class="clr_r flex-g-1">
              <div class="mar_t5">
                <el-radio v-model="radio2" label="1">立即上架售卖</el-radio>
              </div>
              <div class="mar_t10">
                <el-radio v-model="radio2" label="2">自定义上架时间</el-radio>
                <el-time-select v-model="value" :picker-options="{start: '08:30',step: '00:15',end: '18:30'}" placeholder="选择时间"></el-time-select>
              </div>
              <div class="mar_t10">
                <el-radio v-model="radio2" label="3">暂不售卖，放入仓库</el-radio>
              </div>
            </div>
          </div>
        </div>
        <div>
          <el-collapse v-model="activeNames2" @change="handleChange">
            <el-collapse-item title="折叠更多设置" name="1">
              <div class="clr flex pad_tb_10 wid">
                <div class="clr_l flex-g-0 pad_r_20">必选商品:</div>
                <div class="clr_r flex-g-1">
                  <el-radio v-model="radio3" label="1">是</el-radio>
                  <el-radio v-model="radio3" label="2">否</el-radio>
                </div>
              </div>
              <div class="clr flex pad_tb_10 wid flex-y-top">
                <div class="clr_l flex-g-0 pad_r_20">推荐商品:</div>
                <div class="clr_r flex-g-1">
                  <el-radio v-model="radio4" label="1">是</el-radio>
                  <el-radio v-model="radio4" label="2">否</el-radio>
                </div>
              </div>
              <div class="clr flex pad_tb_10 wid flex-y-top">
                <div class="clr_l flex-g-0 pad_r_20">商品详情:</div>
                <div class="clr_r flex-g-1">
                  <vab-quill v-model="content" :min-height="400"></vab-quill>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="mar_t20 ba_f pad_30">
        <el-button>保存并查看</el-button>
        <el-button type="primary">下一步</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import vabQuill from '@/plugins/vabQuill';
export default {
  name: 'addgood',
  components: { vabQuill },
  created() {
    console.log('111', this);
  },
  data() {
    return {
      radio1: '1',
      formInline: {
        solt: '',
        name: '',
        region: ''
      },
      radio: '1',
      radio2: '1',
      value: '',
      activeNames: ['1'],
      activeNames2: ['2'],

      spec: [],
      attribute: [],
      feeding: [],
      group: [
        {
          wmxsPrice: '0',
          wmscPrice: '0',
          wmStock: '0',
          tsxsPrice: '0',
          tsscPrice: '0',
          tsStock: '0'
        }
      ],
      price: '',
      stock: '',
      checked: true,
      radio3: '1', //必选商品
      radio4: '1', //推荐商品
      content: ''
    };
  },
  // components: {
  //     // HelloWorld
  // },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    selectBlur(e, selectItem) {
      selectItem.attributeName = e.target.value;
    },
    addSpec() {
      let specObj = {
        specName: '',
        wmxsPrice: '',
        wmscPrice: '',
        wmStock: '',
        tsxsPrice: '',
        tsscPrice: '',
        tsStock: ''
      };
      this.$set(this.spec, this.spec.length, specObj);
    },
    delSpec(index) {
      this.$delete(this.spec, index);
    },
    selectSpecBlur(e, selectItem, index) {
      console.log(e, selectItem, index);
      if (index == 0) {
        selectItem.specName = e.target.value;
      } else if (index == 1) {
        selectItem.wmxsPrice = e.target.value;
      } else if (index == 2) {
        selectItem.wmStock = e.target.value;
      } else if (index == 3) {
        selectItem.tsxsPrice = e.target.value;
      } else if (index == 4) {
        selectItem.tsscPrice = e.target.value;
      } else if (index == 5) {
        selectItem.tsStock = e.target.value;
      }
    },
    addAttribute() {
      let attributeObj = {
        attributeName: '',
        attributeValue0: '',
        attributeValue1: '',
        attributeValue2: '',
        attributeValue3: '',
        attributeValue4: '',
        attributeValue5: '',
        attributeValue6: '',
        attributeValue7: '',
        attributeValue8: ''
      };
      this.$set(this.attribute, this.attribute.length, attributeObj);
    },
    delAttribute(index) {
      this.$delete(this.feeding, index);
    },
    selectValueBlur(e, selectItem, index) {
      console.log(e, selectItem, index);
      if (index == 0) {
        selectItem.attributeValue0 = e.target.value;
      } else if (index == 1) {
        selectItem.attributeValue1 = e.target.value;
      } else if (index == 2) {
        selectItem.attributeValue2 = e.target.value;
      } else if (index == 3) {
        selectItem.attributeValue3 = e.target.value;
      } else if (index == 4) {
        selectItem.attributeValue4 = e.target.value;
      } else if (index == 5) {
        selectItem.attributeValue5 = e.target.value;
      } else if (index == 6) {
        selectItem.attributeValue6 = e.target.value;
      } else if (index == 7) {
        selectItem.attributeValue7 = e.target.value;
      }
    },
    delFeeding(index) {
      this.$delete(this.feeding, index);
    },
    addFeeding() {
      let feedingObj = {
        feedingName: '',
        feedingOutPrice: '',
        feedingOutStock: '',
        feedingInPrice: '',
        feedingInStock: ''
      };
      this.$set(this.feeding, this.feeding.length, feedingObj);
    }
  }
};
</script>
